<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.product{
				border: 1px solid #ddd;
			}
			.product:hover{
				border: 1px solid #f00;
			}
			.product-image{
				position: relative;
			}
			.product-image .find{
				background-color: rgba(255,0,0,0.85);
				overflow: hidden;
				text-align: center;
				position: absolute;
				left: 0;
				bottom: -35px;
				width: 100%;
				line-height: 35px;
				transform: bottom 1s;
			}
			.product-image:hover .find{
				bottom: 0;
				
			}
			.product-image:hover .find a{
				border-right: 1px solid #fff;
			}
			.product-image .find a{
				display: inline-block;
				width: 50%;
				font-size: 16px;
				color: #fff;
				text-decoration: none;
				/* border: 1px solid #ff0; */
			}
			.product-image .find a.same{
				float: left;
			}
			.product-image .find a.similar{
				float: right;
			}
			.product-image img{
				width: 100%;
			}
			.product-content{
				padding: 5px 10px;
			}
			.product-content .price{
				font-size: 18px;
				color: #f00;
			}
			.product-content a{
				font-size: 14px;
				text-decoration: none;
			}
			.product-content a:hover{
				color: #f00;
				text-decoration: underline;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-12 col-sm-6 col-md-3">
					<div class="product">
						<div class="product-image">
							<a href="#">
								<img src="img/pic1.jpg" class="img-fluid" >
							</a>
							<div class="find">
								<a href="#" class="same">找同款</a>
								<a href="#" class="similar">找相似</a>
							</div>
						</div>
						<div class="product-content">
							<div class="price">&yen;66.00元</div>
							<div class="title">
								<a href="#">
									小猪佩奇英文版绘本
								</a>
							</div>
						</div>
					</div>
				</div>
			
		
				<div class="col-12 col-sm-6 col-md-3">
					<div class="product">
						<div class="product-image">
							<a href="#">
								<img src="img/pic2.jpg" class="img-fluid" >
							</a>
							<div class="find">
								<a href="#" class="same">找同款</a>
								<a href="#" class="similar">找相似</a>
							</div>
						</div>
						<div class="product-content">
							<div class="price">￥66.00元</div>
							<div class="title">
								<a href="#">
									小猪佩奇英文版绘本
								</a>
							</div>
						</div>
					</div>
				</div>
			
			
				<div class="col-12 col-sm-6 col-md-3">
					<div class="product">
						<div class="product-image">
							<a href="#">
								<img src="img/pic3.jpg" class="img-fluid" >
							</a>
							<div class="find">
								<a href="#" class="same">找同款</a>
								<a href="#" class="similar">找相似</a>
							</div>
						</div>
						<div class="product-content">
							<div class="price">￥66.00元</div>
							<div class="title">
								<a href="#">
									小猪佩奇英文版绘本
								</a>
							</div>
						</div>
					</div>
				</div>
			
			
				<div class="col-12 col-sm-6 col-md-3">
					<div class="product">
						<div class="product-image">
							<a href="#">
								<img src="img/pic4.jpg" class="img-fluid" >
							</a>
							<div class="find">
								<a href="#" class="same">找同款</a>
								<a href="#" class="similar">找相似</a>
							</div>
						</div>
						<div class="product-content">
							<div class="price">￥66.00元</div>
							<div class="title">
								<a href="#">
									小猪佩奇英文版绘本
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
